<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router"
import { Layout } from "ant-design-vue";
import HeaderTitle from "./components/Header/index.vue";
import CozeCard from "./components/CozeCard/index.vue";
import WorkCard from "./components/WorkCard/index.vue";
import WorkReview from "./components/WorkReview/index.vue";
import AppCard from "./components/AppCard/index.vue";
import ApplyCard from "./components/ApplyCard/index.vue";
import ReviewCard from "./components/ReviewCard/index.vue";
import work0 from "@/assets/work0.png";
import work1 from "@/assets/work1.png";
import work2 from "@/assets/work2.png";
import work3 from "@/assets/work3.png";
import work4 from "@/assets/work4.png";
import work5 from "@/assets/work5.png";
import { api } from "@/api/api";
import { getCourseCoverApi } from "@/api/study/course";
import { useCampStore } from "@/stores/CampDetailStore";

const { Content } = Layout;

const workCard = ref([
  {
    image: work0,
    title: "智链开发空间",
    desc: "提供低代码、可视化的大模型工作流编排、应用开发、测试、上线部署工具。可便捷可视化编排开发：智能聊天机器人、垂域文档问答助手、协作助手、RAG助手等",
    partner: "智链iLink平台",
    url: import.meta.env.VITE_ILINKAGENT_URL,
  },
  {
    image: work1,
    title: "讯飞星火",
    desc: "讯飞星火科大讯飞推出的新一代认知智能大模型，拥有跨领域的知识和语言理解能力，能够基于自然对话方式理解与执行任务。",
    partner: "科大讯飞",
    url: import.meta.env.VITE_XINGHUO_URL,
  },
  {
    image: work2,
    title: "百度智能云千帆AppBulider",
    desc: "基于百度技术积累和自有业务沉淀，提供了丰富的多模态AI组件，并支持画布式灵活编排工作流开发自定义组件，可快速将企业系统API接入应用。",
    partner: "百度",
    url: import.meta.env.VITE_BAIDUAPP_URL,
  },
  {
    image: work3,
    title: "扣子",
    desc: "HiAgent 是企业专属的 AI 应用创新平台，高度适配企业个性化需求，让业务人员可以轻松构建智能体，让业务创新不受生产技能的限制。",
    partner: "火山引擎",
    url: import.meta.env.VITE_COZE_URL,
  },
  {
    image: work4,
    title: "通义千问",
    desc: "通义千问是阿里推出的先进大语言模型，擅长自然语言理解和生成，广泛应用于文本创作、翻译、编程辅助等场景。",
    partner: "通义",
    url: import.meta.env.VITE_TONGYI_URL,
  },
  {
    image: work5,
    title: "腾讯元器",
    desc: "腾讯元器可帮助用户轻松创建和部署智能体，无需编写代码，即可实现聊天对话、内容创作、图像生成等功能的开发和接入。",
    partner: "腾讯",
    url: import.meta.env.VITE_YUANQI_URL,
  },
]);

const courseCardList = [
  {
    agentImage: work0,
    courseTitle: "智链Agent零基础教学",
    courseAuthor: "北京邮电大学",
    url: '/user/learningNew/course/378461568783360/378461568783361',
  },
  {
    agentImage: work1,
    courseTitle: "星火Agent教学视频",
    courseAuthor: "讯飞星火",
    url: '/user/learningNew/course/378642115499008/378642115499009',
  },
  {
    agentImage: work3,
    courseTitle: "扣子零基础教学视频",
    courseAuthor: "火山引擎",
    url: '/user/learningNew/course/378658182943744/378658182943745',
  },
  {
    agentImage: work2,
    courseTitle: "百度智能云千帆AppBulider教学视频",
    courseAuthor: "百度",
    url: '/user/learningNew/course/378664749519872/378664749519873',
  },
]

const reviewCardList = ref<{ courseName: string, courseDescription: string, courseImage: string; status: string ; courseId: string;folderId: string }[]>([])

const learningCardList = ref([
  {
    cover: "",
    ossFilePath: 'be930870ab13363124/376529948513281/376529948513280.png',
    courseTitle: "大数据技术基础",
    teacherName: "鄂海红",
    url: "/user/learningNew/course/376529948513280/376529948513281",
    description: "该课程是北京邮电大学大数据技术基础课程，旨在培养具有突出技术与创新能力、普于解决复杂工程问题的大数据卓越工程师，课程内容包括大数据概达、离线处理、实时处理、交互式分析和可视化等五个章节，并提供了实验案例和开源工具帮助学生理论结合实践。课程特色包括介绍大数据国产自主技术、行业案例和科教融汇。",
  },
  {
    cover: "",
    ossFilePath: 'be930870ab13363124/378164848382977/378164848382976.png',
    courseTitle: "LangChain基础",
    teacherName: "鄂海红",
    url: '/user/learningNew/course/378164848382976/378164848382977',
    description: "使用LangChain框架调用大模型，并使用提示词、记忆、链、Agent等技术强化大模型回复",
  },
  {
    cover: "",
    ossFilePath: 'be930870ab13363124/378664749519873/378664749519872.png',
    courseTitle: "百度智能云千帆AppBuilder技能树",
    teacherName: "无",
    url: '/user/learningNew/course/378164848382976/378164848382977',
    description: "",
  },
])

const router = useRouter();

const getData = async () => {
  const result = await api.get('/java/teacher/StudySpaceTeacher/getCourseReview?coursesTag=第一期训练营')
  if ((result as unknown as { code: number }).code === 200) {
    const courses = result.data.courses
    for (let i = 0; i < courses.length; i++) {
      const v = courses[i];
      const newCourse = {
        ...v,
        status: v.iscourseComplete === 0
          ? 'unStarted'
          : v.iscourseComplete === 1
            ? 'processing'
            : 'finish',
      };
      if (v.otherComplete === true)
        newCourse.status = 'alreadyFinish';
      reviewCardList.value.push(newCourse); // 将新课程对象添加到 reviewCardList
    }
  }
}

// 获取所有课程的封面
const fetchAllCourseCover = async () => {
  for (let index = 0; index < learningCardList.value.length; index++) {
    const element = learningCardList.value[index];
    const response = await getCourseCoverApi(element.ossFilePath);
    element.cover = response;
  }
}

onMounted(async () => {
  getData();
  await fetchAllCourseCover();
})

const routerGo = () => {
  router.push('/personalSpace/personalInfo')
}

// 获取 Pinia store 实例
const CampStore = useCampStore();

// 跳转到第一期训练营界面
const handleTrainingDetail = () => {
  CampStore.setTrainingInfo({
    campId: '1',
    campName: 'AI+X大模型创新训练营（2024第一期）',
    organizerInfo: '北京邮电大学叶培大创新创业学院、智链iLink开发团队',
    coverImage: 'https://study-square.oss-cn-beijing.aliyuncs.com/image/TrainingCamp/400828582091776.png?Expires=1728996555&OSSAccessKeyId=LTAI5tCCTsonpzgbA5od9dX1&Signature=MJqgffKHHDoQGbYhxPZiNGoN%2FLQ%3D',
    startTime: '2024-09-25T21:41:05.000+08:00',
    endTime: '2024-11-30T21:41:18.000+08:00',
    tags: '第一期训练营',
  });
  router.push('/personalSpace/trainingDetail/第一期训练营');
}
</script>

<template>
  <Layout class="home-layout  overflow-auto p-8">
    <Content>
      <HeaderTitle title="“立即报名，开启AI+之旅" number="1" is-primary />
      <ApplyCard
        title="“AI+X”大模型创新训练营"
        description="训练以“智能赋能，创新引领”为主题，引导同学们基于智链大模型创新实践平台提供的模型工具资源和技术课程资源认识AI、学习AI、运用AI，积极拥抱智能技术，将无限的想象力与技术的生产力结合起来,实现AI+X的智能创新。"
        range="2024/09/25 - 2024/11/30" organizer="举办方：北京邮电大学叶培大创新创业学院、智链iLink开发团队"
      />
      <HeaderTitle title="掌握基础，AI+快速入门" number="2" />
      <div class="w-full">
        <a-row :gutter="[16, 16]">
          <a-col
            v-for="(item, idx) in courseCardList"
            :key="idx"
            :xxl="6"
            :xl="6"
            :lg="12"
            :md="12"
            :sm="12"
            :xs="24"
          >
            <CozeCard
              :agent-image="item.agentImage"
              :course-title="item.courseTitle"
              :course-author="item.courseAuthor"
              :url="item.url"
            />
          </a-col>
        </a-row>
      </div>
      <HeaderTitle title="课程回顾，强化AI技能" number="3">
        <template #extra>
          请先前往<span
            class="text-[#759af8] cursor-pointer hover:underline"
            @click="routerGo"
          >
            个人空间
          </span>
          完善信息，以便为您提供更优质的学习体验。
        </template>
      </HeaderTitle>

      <div class="w-full">
        <a-row :gutter="[16, 16]">
          <a-col
            v-for="(item, idx) in reviewCardList"
            :key="idx"
            :xxl="6"
            :xl="6"
            :lg="12"
            :md="12"
            :sm="12"
            :xs="24"
          >
            <ReviewCard
              :course-image="item.courseImage"
              :course-name="item.courseName"
              :course-description="item.courseDescription"
              :status="item.status"
              :url="item.courseImage"
              :course-id="item.courseId"
              :folder-id="item.folderId"
            />
          </a-col>
        </a-row>
      </div>
      <HeaderTitle title="实战起步，初探AI奥秘" number="4" />
      <div class="w-full">
        <a-row :gutter="[16, 16]">
          <a-col
            v-for="(item, idx) in workCard"
            :key="idx"
            :xxl="12"
            :xl="12"
            :lg="12"
            :md="24"
            :sm="24"
            :xs="24"
          >
            <WorkCard
              :title="item.title"
              :desc="item.desc"
              :image="item.image"
              :partner="item.partner"
              :url="item.url"
            />
          </a-col>
        </a-row>
      </div>
      <HeaderTitle title="进阶学习，深入AI+实践" number="5" />
      <div class="w-full">
        <a-row :gutter="[16, 16]">
          <a-col
            v-for="(item, idx) in learningCardList"
            :key="idx"
            :xxl="12"
            :xl="12"
            :lg="12"
            :md="24"
            :sm="24"
            :xs="24"
          >
            <AppCard
              :cover="item.cover"
              :course-title="item.courseTitle"
              :teacher-name="item.teacherName"
              :url="item.url"
              :description="item.description"
            />
          </a-col>
        </a-row>
      </div>
      <HeaderTitle title="成果绽放，提交AI+创新" number="6">
        <template #extra>
          <div class="search-wrapper">
            <!-- <span>排序：</span>
            <Select
              v-model="selectedSort"
              :options="sortOptions"
              default-value="hot"
              style="width: 120px"
            />
            <Input.Search v-model="searchKeyword" placeholder="搜索作业关键词" /> -->
            <span>点击按钮跳转到提交作业界面</span>
            <a-button type="primary" @click="handleTrainingDetail">
              提交作业
            </a-button>
          </div>
        </template>
      </HeaderTitle>
      <WorkReview />
      <!-- 防止沉底 -->
      <div class="h-[13vh] w-full" />
    </Content>
  </Layout>
</template>

<style scoped>
.home-layout {
  /* 透明背景 */
  background-color: transparent;
}
.search-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
}
.search-wrapper > span {
  white-space: nowrap;
}

.filter-wrapper {
  display: flex;
  gap: 12px;
  padding: 10px 0;
}

.list-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
</style>
